<template>
  <div class="overview">
    <div class="data-wrap community">
      <div class="icon">
        <img class="icon-img" src="@/assets/image/screen/Home/community@2x.png" alt="">
      </div>
      <div class="data-content">
        <div class="name">社区总数</div>
        <div class="number" :class="{ 'show': showNumbers }">{{ animatedCommunity.toLocaleString() }}</div>
      </div>
    </div>
    <div class="data-wrap houses">
      <div class="icon">
        <img class="icon-img" src="@/assets/image/screen/Home/home@2x.png" alt="">
      </div>
      <div class="data-content">
        <div class="name">房屋总数</div>
        <div class="number" :class="{ 'show': showNumbers }">{{ animatedHouses.toLocaleString() }}</div>
      </div>
    </div>
    <div class="data-wrap population">
      <div class="icon">
        <img class="icon-img" src="@/assets/image/screen/Home/pople@2.png" alt="">
      </div>
      <div class="data-content">
        <div class="name">人口总数</div>
        <div class="number" :class="{ 'show': showNumbers }">{{ animatedPopulation.toLocaleString() }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'

// 目标数值
const targetCommunity = 34
const targetHouses = 86690
const targetPopulation = 6340000

// 动画数值
const animatedCommunity = ref(0)
const animatedHouses = ref(0)
const animatedPopulation = ref(0)

// 控制数字显示状态
const showNumbers = ref(false)

// 数字滚动动画函数
const animateNumber = (current, target, duration = 200) => {
  return new Promise((resolve) => {
    const startTime = Date.now()
    const startValue = current.value

    const animate = () => {
      const elapsed = Date.now() - startTime
      const progress = Math.min(elapsed / duration, 1)

      // 使用缓动函数
      const easeOutCubic = 1 - Math.pow(1 - progress, 3)

      current.value = Math.floor(startValue + (target - startValue) * easeOutCubic)

      if (progress < 1) {
        requestAnimationFrame(animate)
      } else {
        current.value = target
        resolve()
      }
    }

    requestAnimationFrame(animate)
  })
}

onMounted(() => {
  // 先触发过渡效果
  setTimeout(() => {
    showNumbers.value = true
  }, 100)

  // 同时开始数字滚动动画
  setTimeout(() => {
    animateNumber(animatedCommunity, targetCommunity, 200)
    animateNumber(animatedHouses, targetHouses, 200)
    animateNumber(animatedPopulation, targetPopulation, 200)
  }, 100)
})
</script>
<style scoped lang="scss">
.overview {
  top: 100px;
  left: 25%;
  width: 50%;
  display: flex;
  margin-top: 28px;
  position: fixed;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  gap: 20px;

  .houses {
    background-image: url('@/assets/image/screen/Home/home-bg2x.png');
  }

  .population {
    background-image: url('@/assets/image/screen/Home/population@2x.png');
  }

  .community {
    background-image: url('@/assets/image/screen/Home/community-bg2x.png');
  }

  .data-wrap {
    gap: 12px;
    width: 262px;
    height: 111px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .icon {
      width: 60px;
      height: 60px;
      margin-left: 26px;

      .icon-img {
        width: 100%;
        height: 100%;
      }
    }

    .data-content {
      gap: 12px;
      display: flex;
      margin-left: 0px;
      flex-direction: column;
      justify-content: space-between;

      .number {
        font-weight: 600;
        font-size: 30px;
        color: #FFFFFF;
        font-variant-numeric: tabular-nums;
        opacity: 0;
        transform: translateY(10px) scale(0.95);
        transition: all 0.3s ease;

        &.show {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .name {
        font-weight: 400;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.9);
        font-family: 微软雅黑;
      }
    }
  }
}
</style>
